import { Graph } from '@antv/x6'
import { FlowState } from '../hooks/useFlowState'

export default function registerNodeEvent (graph: Graph, container: HTMLElement, state: FlowState) {
  // #region 控制连接桩显示/隐藏
  const showPorts = (ports: any, show: boolean) => {
    for (let i = 0, len = ports.length; i < len; i = i + 1) {
      ports[i].style.visibility = show ? 'visible' : 'hidden'
    }
  }
  graph.on('node:mouseenter', () => {
    const ports = container.querySelectorAll(
      '.x6-port-body'
    )
    showPorts(ports, true)
  })
  graph.on('node:mouseleave', () => {
    const ports = container.querySelectorAll(
      '.x6-port-body'
    )
    showPorts(ports, false)
  })
  // #endregion

  // #region 节点/边 选中/取消选中
  graph.on('cell:selected', ({ cell }) => {
    state.currentCell = {
      id: cell.id,
      ...cell.data,
      isNode: cell.isNode()
    }
  })
  graph.on('cell:unselected', () => {
    state.currentCell = null
  })
  // #endregion
}
